<template>
	<zh-drawer :disabbleScroll="true" ref="drawer" :round="props.round" :height="dHeight" :closeable="true"
		placement="bottom" @close="close" @open="open" title="请选择" ok-text="确认" @cancel="cancel" @ok="onOk"
		:okColor="_color" :show="_show">
		<template #title>
			<zh-text v-if="_strvalue">{{ _strvalue }}</zh-text>
		</template>
		<view class="mx-16 ">
			<prettyTimes ref="prettyTimesRef" :width="props.width" :itemHeight="props.itemHeight"
				:followTheme="props.followTheme" :followDark="props.followDark" :dark="props.dark" v-model="_value"
				v-model:endValue="_endValue" :max="props.max" :hideButton="true" :showBeforTime="props.showBeforTime"
				:isQuantum="props.isQuantum" :disableText="props.disableText" :fullText="props.fullText"
				:undisableText="props.undisableText" :timeInterval="props.timeInterval" :selectedTabColor="_color"
				:selectedItemColor="_color" :beginTime="props.start" :endTime="props.end"
				:fullTimeSlot="props.fullTimeSlot" :disableTimeSlot="props.disabledDate" @change="change"
				@click="onclick"></prettyTimes>
		</view>
		<zh-button label="确认选择" block :margin="[32, 12]" :color="_color" :linear="props.linear"
			:linear-deep="props.linearDeep" @click="onOk" :round="props.btnRound"> </zh-button>
		<view :style="{ height: sysinfo.bottom + 'px' }"></view>
	</zh-drawer>
</template>
<script lang="ts" setup>
	/**
 * 日历(弹层式)
 * @description 用法见：zh-calendar-view组件，与其一致的用法。
 */
	import { inject, computed, ref, watch, PropType, nextTick, watchEffect, onMounted } from 'vue';
	import { custom_props, computedTheme, computedClass, computedStyle, computedDark } from '@/tool/lib/minxs';
	import { monthDayItem, dateItemStyle, monthYearItem, weekItem, yearItem } from '../zh-calendar-view/interface';
	import prettyTimes from './pretty-times.vue';
	import * as dayjs from 'dayjs/esm/index';
	import systemConfigStore from '@/store/modules/systemConfigStore';
	const store = systemConfigStore();
	const DayJs = dayjs.default;
	const drawer = ref<any>(null);
	const prettyTimesRef = ref<any>(null);

	/**
	 * 事件说明
	 * v-model 绑定当前的时间。
	 * confirm 当点击确认时触发
	 * click 日期被选中时触发，注意禁用的日期不会触发 。
	 * change 当切换年或者月的时候触发。
	 */
	const emits = defineEmits(['update:modelValue', 'update:modelStr', 'update:show', 'confirm', 'click', 'change', 'cancel', 'close', 'open', 'update:endValue']);

	const props = defineProps({
		...custom_props,
		selectedTabColor: {
			// 日期栏选中的颜色
			type: String,
			default: 'primary',
		},
		selectedItemColor: {
			// 时间选中的颜色
			type: String,
			default: 'primary',
		},
		fullTimeSlot: {
			// 预约开始和结束时间，显示预满时间段
			type: Array,
			default() {
				return [];
			},
		},
		//是否显示当前时间之前的时间
		showBeforTime: {
			type: Boolean,
			default: false,
		},
		//预约时间段
		isQuantum: {
			type: Boolean,
			default: true,
		},

		disableText: {
			//禁用显示的文本
			type: String,
			default: '休息中',
		},
		fullText: {
			//约满显示的文本
			type: String,
			default: '已约满',
		},
		undisableText: {
			//未禁用显示的文本
			type: String,
			default: '可预约',
		},
		timeInterval: {
			// 时间间隔，分钟为单位
			type: Number,
			default: 30,
		},
		show: {
			type: Boolean,
			default: false,
		},
		width: {
			type: [Number, String],
			default: 710,
		},
		itemHeight: {
			type: [Number, String],
			default: 180,
		},
		modelStr: {
			type: String,
			default: '',
		},
		modelValue: {
			type: [String, Number, Date, Array as PropType<Array<String | Number | Date>>],
			default: () => [],
		},
		color: {
			type: String,
			default: 'primary',
		},
		//指的是：有效的可选时间，小于此时间，不允许选中。
		start: {
			type: [String, Number, Date],
			default: '08:00:00',
		},
		//指的是：有效的可选时间，大于此时间，不允许选中。
		end: {
			type: [String, Number, Date],
			default: '18:00:00',
		},

		/** 日历组件属性 */

		//被禁用的日期数组。如果["2022-1-1","2022-5-1"]
		//被禁用的日期将无法选中。
		disabledDate: {
			type: Array,
			default: () => [],
		},

		//当multiple=true时，可以选择的最大日期数量。
		max: {
			type: Number,
			default: 7,
		},
		/** 日历组件属性结束 */
		round: {
			type: Number,
			default: 12,
		},
		//显示日期时间格式是日期格式
		showDateFormat: {
			type: String,
			default: 'YYYY年MM月DD日',
		},
		//显示日期时间格式是时间格式
		showTimeFormat: {
			type: String,
			default: 'HH:mm:ss',
		},
		endValue: {
			type: [String],
			default: undefined,
		},
	});
	const sysinfo = inject(
		'zhuiSysInfo',
		computed(() => {
			return {
				bottom: 0,
				height: 750,
				width: uni.upx2px(750),
				top: 0,
				isCustomHeader: false,
				sysinfo: null,
			};
		})
	);
	const _show = ref(props.show);
	const _value = ref(props.modelValue);
	const _endValue = ref(props.endValue);
	const _strvalue = ref('');
	const _timeValue = ref();
	const _timeStrvalue = ref('');
	const clickValue = ref();
	const _color = computed(() => {
		let color = props.color;
		if (props.followTheme && store.color) {
			color = store.color;
		}
		return color;
	});
	function cancel() {
		close();
	}
	function close() {
		emits('cancel');
		emits('update:show', false);
		_show.value = false;
	}
	function open() {
		emits('open');
		emits('update:show', true);
		_show.value = true;
	}
	watch(
		() => props.show,
		() => {
			if (_show.value == props.show) return;

			if (drawer.value) {
				if (props.show) {
					drawer.value?.open();
				} else {
					drawer.value?.close();
				}
			}
		}
	);
	onMounted(() => { });
	watch(
		() => props.modelValue,
		() => {
			_value.value = props.modelValue;
		},
		{ deep: true }
	);
	watch(
		() => props.endValue,
		() => {
			_endValue.value = props.endValue;
		},
		{ deep: true }
	);
	function change(e : Object) {
		emits('change', e);
	}
	function onclick(e : Object) {
		_strvalue.value = e.str;
		emits('click', e);
	}
	function onOk() {
		let orderDateTime = prettyTimesRef.value.orderDateTime;
		console.log(orderDateTime);
		if (props.isQuantum) {
			emits('update:modelValue', orderDateTime.begin);
			emits('update:endValue', orderDateTime.end);
		} else {
			emits('update:modelValue', orderDateTime.time);
		}
		let ret = '';
		if (orderDateTime.str) {
			let [date, time] = orderDateTime.str.split(' ');
			let str = DayJs(date).format(props.showDateFormat ? props.showDateFormat : 'YYYY年MM月DD日');
			ret = `${str} ${time}`;
		}
		emits('confirm', orderDateTime, ret);
		drawer.value?.close();
	}

	let win_bottom = computed(() => {
		return sysinfo.value.bottom;
	});
	const dHeight = computed(() => {
		return 1200 + win_bottom.value;
	});
</script>